<template>
  <div class="edit_info">
    <input type="text" placeholder="请输入昵称" v-model="userNameitem" />

    <button v-show="userNameitem == ''">提交</button>
    <button v-show="userNameitem != ''" @click="controlNick" class="active">
      提交
    </button>
  </div>
</template>

<script>
export default {
  props: ["userNameitem"],
  data() {
    return {
      userName: "",
      showControlNick: false,
    };
  },
  methods: {
    controlNick() {
      this.$emit("isControlNick", this.userNameitem);
    },
  },
};
</script>

<style lang="less" scoped>
.edit_info {
  //   display: flex;
  padding: 20px;
  input {
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin: 20px auto;
    font-size: 16px;
    padding: 10px;
  }
  button {
    width: 100%;
    height: 40px;
    background-color: #ccc;
    border-radius: 6px;
    color: #fff;
    margin-top: 20px;
    &.active {
      background-color: rgb(68, 162, 255);
    }
  }
}
</style>
